<link rel="stylesheet" type="text/css" href="<?php echo css_url() . 'general_form.css' ?>">

<div class='head' style='font-size:2em; margin-left:20px;'><b>Create New Post - <span id="page-count">Pages : 1</span></b></div>
<form class='fill-in-form no-margin' method='post' id="avatar-upload" action="<?php echo site_url().'/user_group2/posts/upload_picture'?>" 
                               enctype="multipart/form-data" target="upload-target" onsubmit='StartUpload();'>
        <ol>
            <div class="head">Post Picture: </div>
            <li>
            <div class="upload-file" style="cursor:pointer">
                <image id="avatar-image" src="<?php echo image_url().'no-post-picture.png'?>" class="avatar"/>
                <span>Click here to upload your image</span>
            </div>
            <input id="upload-file" class="hidden" type="file" name="avatar" />
            </li>
        </ol>
        <div class="hr" > </div>
</form>
    
<iframe id="upload-target" name="upload-target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

<form method="POST" action="<?php echo site_url() . "/user_group2/posts/create" ?>">
    <input id='file_url' name='PictureURL' type='text' value="<?php echo image_url().'no-post-picture.png'?>" style='display:none'/>
    <ol>
        <div id="page1">
            <li>
                <div id="field-section">
                    <div class="head">Field: </div>
                    <div>
                        <div style="width:40%; display:inline-block; margin-right:10%">
                            <div class="styled-select" style="width:100%">
                                <select id="parent-field" name="parent-field">
                                    <?php foreach ($Category as $row): ?>
                                        <option value="<?php echo $row['CategoryID']; ?>"><?php echo $row['CategoryName'] ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div style="width:40%;  display:inline-block;">
                            <div class="styled-select" style="display:none; width:100%">
                                <select id="child-field" name="child-field">

                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="head same-line" style="display: inline-block">Subject: </div>
                <input id="subject" class="text" type="text" name="subject" placeholder="Subject of your Post" >
            </li>

            <li>
                <div class="head">Content: </div>

                <textarea id="content" name="content" class="text" placeholder="Post content describe about the job"
                          rows="10" style="width:100%"
                          ></textarea>
            </li>


            <li>
                <div id="requirement-section">
                    <div class="head">Minimum Requirement:
                        <div id="add-requirement" class="margin-left add-btn" style='position:relative; left:7%'>+</div>
                        <div id="delete-requirement" class="margin-left add-btn" style='position:relative; left:13%'>-</div>
                    </div>
                    <div id="requirement-content-section" class="tab">
                        <div class="main-requirement margin-bottom">
                            <div class="styled-select" >
                                <select name="MainRequirement" tabindex="0" id="qualification">                             
                                    <option value="1">Primary </option>
                                    <option value="2">Junior High</option>
                                    <option value="3">High School</option>                              
                                    <option value="4">College</option>
                                    <option value="5">University</option>
                                    <option value="6">Bachelor</option>
                                    <option value="7">Master</option>
                                    <option value="8">Doctor</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>
        <div id="page2" style="display:none">

            <li>
                <div id="contact-section">
                    <div class="head">Contact: </div>
                    <div class="styled-select" >
                        <select id="AddressTemp" name="contact-id" tabindex="0">
                            <?php foreach ($UserInfo['Contact'] as $Contact): ?>
                                <option value="<?php echo $Contact['ContactID'] ?>"><?php echo $Contact['Name'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class='margin-top'>
                        <textarea id="contact-content" name="contact-content" class="text" placeholder="Your contact detail"
                                  rows="2" style="width:100%"
                                  ></textarea>
                    </div>
                </div>
            </li>

            <li>
                <div id="workplaces-section">
                    <div class="head">Work Places:
                    </div>
                    <div class="content-section">
                        <div class="content">
                            <div class="styled-select" >
                                <select name="workplaces-id" tabindex="0">
                                    <?php foreach ($UserInfo['Contact'] as $Contact): ?>
                                        <option value="<?php echo $Contact['ContactID'] ?>"><?php echo $Contact['Name'] ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            <div class="margin-top margin-bottom">
                                <textarea name="workplaces-content" class="text margin-bottom" placeholder="Your workplace detail"
                                          rows="2" style="width:100%"
                                          ></textarea>                    
                                
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            
            <li>
                <div class="head" style="display:inline; margin-right: 20px">Number of Applicant</div>
                <input class="text" type="text" name="num-applicant" placeholder="(Default = 0)" >
            </li>
            
            <li>
                <div class="head" style="display:inline; margin-right: 20px;">Salary</div>
                <input class="text" type="text" name="salary" placeholder="$" style="width:20%">
            </li>
            </li>
            
            
            <li>
                <div class="head" style="display:inline; margin-right: 115px">Date End</div>
                <input id="date-end" class="text" placeholder="(Optional) MM/DD/YY" name="DateEnd">
            </li>
        </div>

        <li>
            <div style="float:right">
                <div id="pre-page" class="margin-left add-btn"><</div>
                <div id="next-page" class="margin-left add-btn">></div>
            </div>

            <div id="form-submit-btn" style="display:none;;" class="submit-bt">Submit</div>
        </li>
        
 
    </ol>
</form>

<script src="<?php echo asset_url() . "js/string_helper.js" ?>"></script>
<?php include js_url(true) . '/validate_things.php' ?>
<script>
    /* -------------------Uploading avatar ---------------*/
    PictureResult = "";
        function StopUpload(Result){
                if(Result)
                {
                    PictureResult = Result;
                    var i = new Date().getTime();
                    $("#avatar-image").attr("src","<?php echo image_url()?>"+Result+"?random="+i);
                    $("div.upload-file span").text("Successfully uploaded");
                    $("input#file_url").val("<?php echo image_url()?>"+Result);
                }
               else{
                   $("div.upload-file span").text("The uploading has been failed. Please try again");
               }
            }

        function StartUpload(){
            $("div.upload-file span").text("Uploading....");
        }
        /* Upload file btn click */
        $("div.upload-file").on('click',function(){
            $("input#upload-file").click();
        });

        $("input#upload-file").on('change',function(){
            if(!checkFileName($(this).val()))
            {
                $("div.upload-file span").text("Wrong type of file. Only JPG, JPEG, PNG and BMP is allowed");
                return;
            }
            $("form#avatar-upload").submit();
        });
    /*--------------End of uploading avatar----------------------*/
    var Contacts = <?php echo json_encode($UserInfo['Contact']); ?>;
    var Fields = <?php echo json_encode($Category); ?>;
    /* Address Select Handler */
    var updateContacthandler = function() {
        $("#AddressTemp").on("change", function() {
            /*----- Get the Contact ----------*/
            val = $(this).val();
            var Contact = null;
            Contacts.forEach(function(ContactTemp) {
                if (ContactTemp['ContactID'] == val) {
                    Contact = ContactTemp;
                }
            });
            if(!Contact) return;
            ContactContent = "";
            Address = Contact['Address'].split("#");
            AddString = "";
            if (Address[0].length > 0)
                AddString += Address[0] + " Province  - ";
            if (Address[1].length > 0)
                AddString += Address[1] + " City - ";
            if (Address[2].length > 0)
                AddString += "District " + Address[2] + " - ";
            if (Address[3].length > 0)
                AddString += Address[3] + "";

            ContactContent += AddString + "\n";
            Phones = Contact['Phones'].split("#");
            PhoneString = "Phone: ";
            Phones.forEach(function(Phone) {
                PhoneString += Phone + " - ";
            });
            PhoneString = PhoneString.substring(0, PhoneString.length - 3);
            ContactContent += PhoneString + "\n";
            if ((Contact['Describtion']).length != 0)
                ContactContent += "Note: " + Contact['Describtion'];

            $("#contact-content").val(ContactContent);
        });
    }
    /* End of Address Select Handler */
    /* Workplace Handler */
    var updateWorkplaceHandler = function() {
        $("select[name='workplaces-id']").on("change", function() {
            val = $(this).val();
            var Contact = null;
            Contacts.forEach(function(ContactTemp) {
                if (ContactTemp['ContactID'] == val) {
                    Contact = ContactTemp;
                }
            });
            if(!Contact) return;
            AddressContent = "";
            Address = Contact['Address'].split("#");
            AddString = "";
            if (Address[0].length > 0)
                AddString += Address[0] + " Province - ";
            if (Address[1].length > 0)
                AddString += Address[1] + " City - ";
            if (Address[2].length > 0)
                AddString += "District " + Address[2] + " - ";
            if (Address[3].length > 0)
                AddString += Address[3] + "";

            AddressContent += AddString + "\n";

            $(this).parent().siblings(":first").children('textarea').html(AddressContent);
        });
    }
    /* End of Workplace Handler */

    /* Field Handler */
    var updateCategoryHandler = function() {
        $("#parent-field").on("change", function() {
            var id = $(this).val();
            Fields.forEach(function(FieldTemp) {
                if (FieldTemp['CategoryID'] == id) {
                    ChildCategories = FieldTemp['Childs'];
                }
            });

            data = "";
            ChildCategories.forEach(function(Child) {
                data += '<option value="{0}">{1}</option>'.format(Child['CategoryID'], Child['CategoryName']);
            });
            $("#child-field").html(data);
            $("#child-field").parent().css("display", "inline-block");
        });
    }
    /* End of Field Handler */

    /* Add-Delete Requirement Button */
    $("#add-requirement").on("click", function() {
        data = "<div class='content-requirement'>"
                + "<input name='RequirementTitle[]' class='text margin-bottom' type='text' placeholder='Name'/>"
                + "<input name='RequirementLevel[]' class='text margin-bottom' type='text' placeholder='Level'/>"
                + "</div>";
        data2 = "<select name='RequirementCondition[]'><option value='&&'>And</option><option value='||'>Or</option></select>"
        $(".content-requirement:last").append(data2);
        $("#requirement-content-section").append(data);
    });
    $("#delete-requirement").on("click", function() {
        $(".content-requirement:last").remove();
        $(".content-requirement:last select").remove();
    });
    /* End of Add-Delete Requirement Button */

    /* Add-Delete Workplace Button */
    $("#add-workplace").on("click", function() {
        data =  '<div class="hr"/>'
                +'<div class="content">'
                + '<div class="styled-select same-line" >'
                + '<select name="workplaces-id" tabindex="0">'
                + '<?php
                    foreach ($UserInfo['Contact'] as $Contact) {
                        echo '<option value="' . $Contact['ContactID'] . '">' . $Contact['Name'] . '</option>';
                    }
                    ?>'
                + '</select>'
                + '</div>'

                + '<div class="margin-top margin-bottom">'
                + '<textarea id="contact-content" name="workplaces-content" class="text margin-bottom" placeholder="Your workplace detail"'
                + 'rows="2" style="width:100%"'
                + '></textarea>'
                + '<input class="text margin-bottom" type="text" name="num-applicant[]" placeholder="Number of applicant (Default = 0)" >'
                + '</div>'
                + '</div>';
        $("#workplaces-section").children(".content-section").append(data);

        //Reset the handler
        update();
        $("select[name='workplaces-id']:last").change();

    });
    $("#delete-workplace").on("click", function() {
        $("#workplaces-section .content-section").children("div.content:last").remove();
    });
    /* End of add-delete workplace button */

    
    var update = function() {
        updateContacthandler();
        updateCategoryHandler();
        updateWorkplaceHandler();
    }
    update();

    $("#parent-field").change();
    $("#AddressTemp").change();
    $("select[name='workplaces-id']").change();


    var pages = 1;
    var MAX_PAGE = 2;
    /* Pre-Next Page button handler */
    $("#next-page").on("click", function() {
        if (pages < MAX_PAGE) {
            /* Validate Here */
            
            /* End of Validate */
            
            $("#page" + pages.toString()).hide();
            pages += 1;
            $("#page" + pages.toString()).show();
            if(pages === MAX_PAGE)
                $("#form-submit-btn").show();
            $("#page-count").text("Page : " + pages.toString());
        }
    });
    
    $("#pre-page").on("click", function() {
        if (pages  > 1) {
            /* Validate Here */
            
            /* End of Validate */
            $("#page" + pages.toString()).hide();
            pages -= 1;
            $("#page" + pages.toString()).show();
            if(pages !== MAX_PAGE)
                $("#form-submit-btn").hide();
            $("#page-count").text("Page : " + pages.toString());
        }
    });
    /* End of Pre-Next Page button handler */
    
    /* Submit button */
    $("#form-submit-btn").on("click",function(){
        $("form").submit();
    });
    /* End of submit button*/
    $(window).on('beforeunload', function(){
        
        return "Are you sure to leavae";
    });
    
    $(window).on("unload",function(){
        url_link = "<?php echo site_url().'/ultility/delete_picture'?>"
        $.ajax({
            url : url_link,
            type: 'post',
            data: { picture_url: PictureResult },
            async: false,
            success: function(){
            } 
        });
    });
</script>